<script setup lang="ts">
import { reactive, ref } from 'vue'

import type { AxiosError, AxiosResponse } from 'axios'
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElMessage } from 'element-plus'

import api from '@/utils/api'

//外部的参数
const prop = defineProps({
  accountInfo: {
    type: Object
  }
})

//自定义事件
const emit = defineEmits(['pre', 'next'])

//表单数据
const info = reactive({
  account: '',
  sex: '1',
  password: '',
  name: ''
})
//表单的实例
const formRef = ref()
//数据校验
const rules = reactive<FormRules<typeof info>>({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((isValid: boolean) => {
    if (!isValid) {
      return
    }
    //显示加载动画
    const loading = ElLoading.service({
      lock: true,
      text: '正在处理',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    //请求接口，进行登陆
    api
      .post('/api/register', {
        account: info.account,
        sex: info.sex,
        password: info.password,
        phone: prop.accountInfo.account,
        captcha: prop.accountInfo.captcha,
        name: info.name
      })
      .then((response: AxiosResponse<any>) => {
        if (response.status != 200 || !response.data || response.data.code != 200) {
          if (response.data) {
            ElMessage.error('处理失败:' + response.data.msg)
          } else {
            ElMessage.error('处理失败!')
          }
          return
        }
        emit('next')
      })
      .catch((error: AxiosError<any>) => {
        if (error.response && error.response.data) {
          ElMessage.error(error.response.data.msg)
          return
        }
        ElMessage.error('操作异常：' + error.message)
      })
      .finally(() => {
        loading.close()
      })
  })
  return null
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="info"
    :rules="rules"
    size="large"
    label-width="120"
    class="infoForm"
    status-icon
  >
    <el-form-item label="账号：" prop="account">
      <el-input v-model="info.account" placeholder="请输入账号" suffix-icon="UserFilled" />
    </el-form-item>
    <el-form-item label="姓名：" prop="name">
      <el-input v-model="info.name" placeholder="请输入姓名" suffix-icon="UserFilled" />
    </el-form-item>
    <el-form-item label="密码：" prop="password">
      <el-input
        v-model="info.password"
        type="password"
        placeholder="请输入密码"
        suffix-icon="Lock"
      />
    </el-form-item>
    <el-form-item label="性别：" prop="sex">
      <el-radio-group v-model="info.sex">
        <el-radio label="1" value="1" size="large">男</el-radio>
        <el-radio label="2" value="2" size="large">女</el-radio>
        <el-radio label="3" value="3" size="large">保密</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="">
      <div class="formBtns">
        <el-button type="danger" @click="emit('pre')">上一步</el-button>
        <el-button type="primary" @click="submitForm(formRef)"> 注册 </el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.infoForm {
  width: 50%;
  margin: 0 auto;
}

.infoForm .formBtns {
  margin: 0 auto;
}

.infoForm .formBtns .el-button {
  width: 150px;
}

.flex {
  display: flex;
  width: 100%;
}

.flex .flexItem {
  flex: 1;
}
</style>
